<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:include page="../framework/header.jsp" />
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/static/css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/static/css/jsplumb-draggable.css" />
<style type="text/css">
.send-line {
cursor: pointer;

}
</style>
<div id="container"
	class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">

	<jsp:include page="../framework/topper.jsp" />
	<div class="boxed">
		<!--=======================  页面主体内容  ============================-->
		<div id="content-container">
			<!-- ============================  页面内容区  ================================== -->
			<div  id="page-content">
					<div id='containd1' class="containment-wrapper">
						<div class="w draggable jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
							id="rejected12" style="top: 10px; left: 10px;">
							REJECTED12
							<div class="ep" action="rejected12"></div>
						</div>
						<div class="w draggable jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
							id="rejected13" style="top: 10px; left: 150px;">
							REJECTED13
							<div class="ep" action="rejected13"></div>
						</div>
						<div class="w draggable jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
							id="rejected14" style="top: 10px; left: 290px;">
							REJECTED14
							<div class="ep" action="rejected14"></div>
						</div>
						<div class="w draggable jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
							id="rejected15" style="top: 10px; left: 430px;">
							REJECTED15
							<div class="ep" action="rejected15"></div>
						</div>
					</div>



	<div class="jtk-page-container" style="height: 500px;">
		<div class="jtk-container">
			<div class="jtk-demo-main">
				<!-- demo -->
				<div
					class="jtk-demo-canvas canvas-wide statemachine-demo jtk-surface jtk-surface-nopan"
					id="canvas"
					style="background-image: -webkit-linear-gradient(180deg, whitesmoke 1px, rgba(242, 242, 242, 0) 1px), -webkit-linear-gradient(90deg, whitesmoke 1px, rgba(242, 242, 242, 0) 1px); background-size: 20px 20px;">
					<div
						class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
						id="opened">
						BEGIN
<!-- 						<div class="ep" action="begin"></div> -->
						<div class="btn-control clearfix" style="margin-top:5px;">
							<a data-id="1" class="btn btn-default btn-xs btn-rounded btn-assideedit" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-edit"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded btn-remove" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-trash"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded send-line" 
							style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 4px;width: 20px;">
								<i class="fa fa-arrows-h"></i>
							</a>
						</div>
					</div>
					<div
						class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
						id="phone1">
						PHONE INTERVIEW 1
<!-- 						<div class="ep" action="phone1"></div> -->
							<div class="btn-control clearfix" style="margin-top:5px;">
							<a data-id="1" class="btn btn-default btn-xs btn-rounded btn-assideedit" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-edit"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded btn-remove" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-trash"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded send-line" 
							style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 4px;width: 20px;">
								<i class="fa fa-arrows-h"></i>
							</a>
						</div>
					</div>
					<div
						class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
						id="phone2">
						PHONE INTERVIEW 2
<!-- 						<div class="ep" action="phone2"></div> -->
						<div class="btn-control clearfix" style="margin-top:5px;">
							<a data-id="1" class="btn btn-default btn-xs btn-rounded btn-assideedit" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-edit"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded btn-remove" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-trash"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded send-line" 
							style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 4px;width: 20px;">
								<i class="fa fa-arrows-h"></i>
							</a>
						</div>
					</div>
					<div
						class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
						id="inperson">
						IN PERSON
<!-- 						<div class="ep" action="inperson"></div> -->
						<div class="btn-control clearfix" style="margin-top:5px;">
							<a data-id="1" class="btn btn-default btn-xs btn-rounded btn-assideedit" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-edit"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded btn-remove" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-trash"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded send-line" 
							style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 4px;width: 20px;">
								<i class="fa fa-arrows-h"></i>
							</a>
						</div>
					</div>
					<div
						class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
						id="rejected">
						REJECTED
<!-- 						<div class="ep" action="rejected"></div> -->
						<div class="btn-control clearfix" style="margin-top:5px;">
							<a data-id="1" class="btn btn-default btn-xs btn-rounded btn-assideedit" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-edit"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded btn-remove" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-trash"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded send-line" 
							style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 4px;width: 20px;">
								<i class="fa fa-arrows-h"></i>
							</a>
						</div>
					</div>

					<div
						class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
						id="rejected11">
						REJECTED11
<!-- 						<div class="ep" action="rejected11"></div> -->
						<div class="btn-control clearfix" style="margin-top:5px;">
							<a data-id="1" class="btn btn-default btn-xs btn-rounded btn-assideedit" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-edit"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded btn-remove" style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;">
								<i class="fa fa-trash"></i>
							</a>
							<a class="btn btn-default btn-xs btn-rounded send-line" 
							style="border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 4px;width: 20px;">
								<i class="fa fa-arrows-h"></i>
							</a>
						</div>
					</div>
				</div>
				<!-- /demo -->
			</div>
		</div>
	</div>
			</div>
		</div>

		<!--=========================  过程可视化消息栏  ==========================-->
		<jsp:include page="../framework/aside.jsp" />

		<!--=========================  左侧菜单  ==========================-->
		<jsp:include page="../framework/lefter.jsp" />

	</div>

	<!--=========================  页面底部版权信息  ==========================-->
	<jsp:include page="../framework/footer.jsp" />

	<!--=========================  返回顶层按钮  ==========================-->
	<button class="scroll-top btn">
		<i class="pci-chevron chevron-up"></i>
	</button>
	<!--=========================  选择皮肤功能  ==========================-->
	<jsp:include page="../framework/page-set.jsp" />

	<div id="floating-top-right" class="floating-container"></div>
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

<jsp:include page="../framework/script.jsp" />
<%-- --%>

	
		
<script src="${pageContext.request.contextPath}/static/plugin/jquery-ui-1.12.1.drag-drop/jquery-ui.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/static/js/common/jsplumb.js"></script>
<%-- <script  src="${pageContext.request.contextPath}/static/plugin/jsplumb/js/jsplumb.min.js"></script> --%>
<script type="text/javascript">
var connects = [ {
	source : "opened",
	target : "phone1"
}, {
	source : "phone1",
	target : "phone1"
}, {
	source : "phone1",
	target : "inperson"
}, {
	source : "phone2",
	target : "rejected"
}, {
	source : "rejected11",
	target : "rejected"
} ];

//连线
jsPlumb.ready(function() {

	// setup some defaults for jsPlumb.
	var instance = jsPlumb.getInstance({
		Endpoint : [ "Dot", {
			radius : 2
		} ],//设置连接点的形状为圆形
		Connector : "StateMachine",//设置连线为状态机曲线
		HoverPaintStyle : {
			stroke : "#1e8151",
			strokeWidth : 2
		},//鼠标经过线的样式
		ConnectionOverlays : [ [ "Arrow", {
			location : 1,
			id : "arrow",
			length : 24,
			foldback : 0.8
		} ], [ "Label", {
			label : "依赖",
			id : "label",
			cssClass : "aLabel"
		} ] ],//附加到每个连接的默认重叠
		Container : "canvas"//设置父级的元素，一个容器
	});
	//动态的修改连接线或端点的样式。
	instance.registerConnectionType("basic", {
		anchor : "Continuous",
		connector : "StateMachine"
	});

	window.jsp = instance;

	var canvas = document.getElementById("canvas");
	var windows = jsPlumb.getSelector(".statemachine-demo .w");

	// bind a click listener to each connection; the connection is deleted. you could of course
	// just do this: instance.bind("click", instance.deleteConnection), but I wanted to make it clear what was
	// happening.
	//单击清除连接
	instance.bind("click", function(c) {
		instance.deleteConnection(c);
	});

	// bind a connection listener. note that the parameter passed to this function contains more than
	// just the new connection - see the documentation for a full list of what is included in 'info'.
	// this listener sets the connection's internal
	// id as the label overlay's text.
	//即监听所有的连接事件。
//		instance.bind("connection", function(info) {
		
//			info.connection.getOverlay("label")
//					.setLabel(info.connection.id);
//			console.log(info);
//		});

	// bind a double click listener to "canvas"; add new node when this occurs.
	//双击增加一个新的节点
	jsPlumb.on(canvas, "dblclick", function(e) {
		console.log(e);
		newNode(e.offsetX, e.offsetY);
	});

	//
	// initialise element as connection targets and source.
	//
	var initNode = function(el) {

//initialise draggable elements.
instance.draggable(el,{
    //helper: "clone",
    //scope: "plant",
	zIndex: 2000,
	distance: 20,
    opacity: 0.6,
    containment: "#canvas",
    cursor: "move"
    
});

instance.makeSource(el, {
			filter : ".send-line,.send-line i",
			anchor : "Continuous",
			connectorStyle : {
				stroke : "#5c96bc",
				strokeWidth : 2,
				outlineStroke : "transparent",
				outlineWidth : 4
			},
			connectionType : "basic",
			extract : {
				"action" : "the-action"
			},
			maxConnections : 2,
			onMaxConnections : function(info, e) {
				alert("Maximum connections (" + info.maxConnections
						+ ") reached");
			}
		});

		instance.makeTarget(el, {
			dropOptions : {
				hoverClass : "dragHover"
			},
			anchor : "Continuous",
			allowLoopback : false
		//不想造成回环（自己连自己）
		});

		// this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped
		// version of this demo to find out about new nodes being added.
		//
		//instance.fire("jsPlumbDemoNodeAdded", el);
	};

	var newNode = function(x, y) {
		//debugger;
		console.log("x: " + x);
		console.log("y: " + y);
		var d = document.createElement("div");
		var id = jsPlumbUtil.uuid();
		d.className = "w";
		d.id = id;
		d.innerHTML = id.substring(0, 7) + "<div class='btn-control clearfix' style='margin-top:5px;'><a class='btn btn-default btn-xs btn-rounded btn-assideedit' style='border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;'><i class='fa fa-edit'></i></a>"
								+"<a class='btn btn-default btn-xs btn-rounded btn-remove' style='border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 5px;width: 20px;'><i class='fa fa-trash'></i></a>"
								+"<a class='btn btn-default btn-xs btn-rounded send-line' style='border-radius: 10px;border:1px solid #7baac9;padding-top: 3px;padding-left: 4px;width: 20px;'><i class='fa fa-arrows-h'></i></a></div>";
		d.style.left = x + "px";
		d.style.top = y + "px";
		console.log(d);
		instance.getContainer().appendChild(d);
		initNode(d);
		return d;
	};

	// suspend drawing and initialise.
	instance.batch(function() {
		for (var i = 0; i < windows.length; i++) {
			initNode(windows[i], true);
		}
		for (var i = 0; i < connects.length; i++) {
			instance.connect({
				source : connects[i].source,
				target : connects[i].target,
				type : "basic"
			});

		}
		// and finally, make a few connections
		//instance.connect({ source: "opened", target: "phone1", type:"basic" });
		//instance.connect({ source: "phone1", target: "phone1", type:"basic" });
		//instance.connect({ source: "phone1", target: "inperson", type:"basic" });
		//instance.connect({ source: "phone2", target: "rejected", type:"basic" });

		//instance.connect({ source: "rejected11", target: "rejected", type:"basic" });
	});

	//删除按钮
    $(document).on('click', '.btn-remove',function() {
        var id = $(this).parents('.w')[0].id;//data('id');
        instance.remove('' + id);
        
//	        var len = selectMirrorArr.length;
//	        for(var i=0;i<len;i++){
//	        	if(selectMirrorArr[i].id == id){
//	    			selectMirrorArr.remove(i);
//	    			break;
//	    		}
//	        }
        
        instance.repaintEverything();
    });
	
	
	$("#containd1 .draggable").draggable({
		//connectToSortable: "#containd", //允许 draggable 放置在指定的 sortable 上
		//containment: "#containd",//约束在指定元素或区域的边界内拖拽。
		//appendTo: "#containd",//当拖拽时，draggable 助手（helper）要追加到哪一个元素
		helper : "clone",
		//revert: "invalid",//当拖拽停止时，元素是否还原到它的开始位置。如果设置为 "invalid"，还原仅在 draggable 未放置在 droppable 上时发生
		//snap: true,//元素是否对齐到其他元素。
		//zIndex: 2000,
		//distance: 20,//鼠标按下后拖拽开始前必须移动的距离，以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。

		//opacity: 0.6,

		//containment: "#containd",
		//scroll: false,
		//cursor: "move"

		scope : "plant",//用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。
		//一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。
		revert : 'invalid',//如果设置为 "invalid"，还原仅在 draggable 未放置在 droppable 上时发生，如果设置为 "valid" 则相反。
		distance : 20,
		opacity : 0.6,
		snap : false,
		//scroll: false,
		cursor: "move"//拖拽操作期间的 CSS 光标。
});


$("#canvas").droppable({
				accept : ".draggable",
				scope : "plant",
				//helper: "clone",
				snap : false,
				tolerance : 'pointer',
				containment : "#canvas",
				//鼠标进入区域视为有效
				//activeClass : '',
				drop : function(event, ui) {
// 					console.log("ui: " + JSON.stringify(ui));
					//instance.getContainer().appendChild(ui);
					//initNode(ui);
					//newNode(event.offsetX, event.offsetY);
					//newNode(top+72, left+100);
					console.log(event);
					//debugger;
					//console.info(ui.offset.top);
					//var canvas = document.getElementById("containd");
					var top = parseInt(ui.offset.top - 280)+77+32-55;
					var left = parseInt(ui.offset.left) - 4+8-235;
					//var top0 = $(canvas).offset().top;
					//var left0 = $(canvas).offset().left+30;			
					console.info("top: " + top);
					console.info("left: " + left);
					//console.info(top0);
					//console.info(left0);

					var $dragobj = ui.draggable.clone();
					//console.log("dragobj: "+$(ui.draggable[0].outerHTML)[0]);
					$dragobj.css({
						position : 'absolute',
						top : top,
						left : left
					});
					//$dragobj.removeClass('draggable').addClass('draggable');
					//$dragobj.offset.left = ui.offset.left + 20;
					//$dragobj.offset.top = ui.offset.top + 20;
					// console.log(ui.offset.left);
					//console.log(ui.offset.top);
					console.info("offsetY: " + event.offsetY);
					console.info("offsetX: " + event.offsetX);

					//console.info("top+72: "+parseInt(top+72));
					//console.info("left+100: "+parseInt(left+100));
					newNode(parseInt(event.offsetX + left - 50),
							parseInt(event.offsetY + top - 24));
					//newNode(parseInt(top+72), parseInt(left+100));
					$dragobj.draggable({
						containment : "#canvas",
						distance : 20,
						opacity : 0.6,
						//scroll: false,
						cursor : "move"
					});

					//$('#canvas').append($dragobj);

				}
			});

	//jsPlumb.fire("jsPlumbDemoLoaded", instance);

});
</script>
</body>
</html>